import { Cell, Graph } from '@antv/x6'
import { defaultPort } from '../../../shapes/config'
import { DataType } from '../../../shapes/type'
import { useYkEditorDrawStore } from '@yk/components/draw/editor-draw/store'

const store = useYkEditorDrawStore()

// region TODO 根矩形
Graph.registerNode('BaseRect', {
  inherit: 'rect',
  attrs: {
    body: {
      fill: '#FFFFFF',
      strokeWidth: 1
    }
  },
  ports: defaultPort,
  data: {
    attrRoot: 'rect',
    events: {
      added (graph, { cell }) {
        console.log(graph, cell)
      }
    },
    getAttrModules: () => {
      return [
        {
          title: '基本样式',
          group: 'Attrs',
          components: () => import('../../components/NodeBasicAttrs.vue'),
          solution: {}
        },
        {
          title: '操作',
          group: 'Attrs',
          components: () => import('../../components/NodeOperation.vue'),
          solution: {}
        }
      ]
    }
  } as DataType
} as any)
// endregion

// region TODO 根图片
Graph.registerNode('BaseImage', {
  inherit: 'image',
  attrs: {
    image: {
      preserveAspectRatio: 'none',
      href: ''
    }
  },
  ports: defaultPort,
  data: {
    attrRoot: 'image',
    getAttrModules () {
      return [
        {
          title: '图片',
          group: 'Attrs',
          components: () => import('./components/BasicImage.vue'),
          solution: {}
        },
        {
          title: '操作',
          group: 'Attrs',
          components: () => import('../../components/NodeOperation.vue'),
          solution: {}
        }
      ]
    }
  } as DataType
} as any)
// endregion

// region TODO 文本
Graph.registerNode('TextBox', {
  inherit: 'text-block',
  text: '文本',
  attrs: {
    label: {
      style: {
        whiteSpace: 'pre-wrap',
        textAlign: 'center',
        alignItems: 'center'
      }
    }
  },
  data: {
    attrRoot: ['foreignObject', 'rect'],
    getAttrModules () {
      return [
        {
          title: '基本样式',
          group: 'Attrs',
          components: () => import('../../components/NodeBasicAttrs.vue'),
          solution: {}
        },
        {
          title: '文本样式',
          group: 'Attrs',
          components: () => import('./components/TextStyle.vue'),
          solution: {}
        },
        {
          title: '操作',
          group: 'Attrs',
          components: () => import('../../components/NodeOperation.vue'),
          solution: {}
        }
      ]
    }
  } as DataType
})
// endregion

// region TODO 线
Graph.registerNode('Line', {
  inherit: 'image',
  data: {
    events: {
      added (graph: Graph, args: { cell: Cell; isEdit: boolean; isShow: boolean }) {
        const { x, y } = (args.cell as any).getPosition()
        const { width, height } = (args.cell as any).getSize()
        graph.addEdge({
          source: [x, y + height],
          target: [x + width, y],
          ...store.defaultLineStyle
        })
        graph.removeCell(args.cell.id)
      }
    }
  } as DataType
} as any)
// endregion
